import React, { useEffect, useState } from 'react';
import * as echarts from "echarts";
import axios from 'axios';
import "./index.css"

const User3 = () => {
  const [people, setPeople] = useState('')
  const [sp, setSp] = useState('')
  useEffect(() => {
    // 在useEffect中初始化echarts图表
    axios.get(`https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/people`, {
      headers: {
        " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
        "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
        "Content-Type": ""
      }
    }).then((res) => {
      // console.log(res)
      setPeople(res.data.results.length)
    })
    axios.get(`https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/bscs`, {
      headers: {
        " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
        "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
        "Content-Type": ""
      }
    }).then((res) => {
      // console.log(res)
      setSp(res.data.results.length)
    })
    const chartDom = document.getElementById('chart');
    const myChart = echarts.init(chartDom);

    // const now = new Date();

    // // 计算往前推3天的日期
    // const threeDaysAgo = new Date(now);
    // threeDaysAgo.setDate(now.getDate() - 3);

    // // 计算往后推3天的日期
    // const threeDaysLater = new Date(now);
    // threeDaysLater.setDate(now.getDate() + 3);
    axios.get(`https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/people`, {
      headers: {
        " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
        "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
        "Content-Type": ""
      }
    }).then((res) => {
      const data = res.data.results.map((resule) => {
        return {
          date: resule.createdAt.substr(0, 10),

        }
      })
      // const formatDate = (date) => {
      //   const year = date.getFullYear();
      //   const month = `${date.getMonth() + 1}`.padStart(2, '0');
      //   const day = `${date.getDate()}`.padStart(2, '0');
      //   return `${year}-${month}-${day}`;
      // };

      // 将日期格式化为echarts横坐标的数据
      const currentDate = new Date();
      const xAxisData = [];
      const seriesData = []
      for (let i = -3; i <= 3; i++) {
        const date = new Date(currentDate);
        date.setDate(currentDate.getDate() + i);
        const formattedDate = date.toISOString().substr(0, 10);
        xAxisData.push(formattedDate);
        const count = data.filter((item) => item.date === formattedDate).length;
        seriesData.push(count);
      }

      const option = {
        // 这里是echarts图表的配置选项
        title: {
          text: '7天内新增用户数量',
          fontSize: 18,
          fontWeight: 'bold',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: seriesData,
          type: 'line'
        }]
      };
      myChart.setOption(option);

    })

    // 格式化日期为字符串

    // 在组件卸载时销毁echarts实例
    return () => {
      myChart.dispose();
    };
  }, []);
  useEffect(() => {
    // 在useEffect中初始化echarts图表
    const chartDom = document.getElementById('shoop');
    const myChart = echarts.init(chartDom);

    // const now = new Date();

    // // 计算往前推3天的日期
    // const threeDaysAgo = new Date(now);
    // threeDaysAgo.setDate(now.getDate() - 3);

    // // 计算往后推3天的日期
    // const threeDaysLater = new Date(now);
    // threeDaysLater.setDate(now.getDate() + 3);
    axios.get(`https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/bscs`, {
      headers: {
        " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
        "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
        "Content-Type": ""
      }
    }).then((res) => {
      const data = res.data.results.map((resule) => {
        return {
          date: resule.createdAt.substr(0, 10),

        }
      })
      // const formatDate = (date) => {
      //   const year = date.getFullYear();
      //   const month = `${date.getMonth() + 1}`.padStart(2, '0');
      //   const day = `${date.getDate()}`.padStart(2, '0');
      //   return `${year}-${month}-${day}`;
      // };

      // 将日期格式化为echarts横坐标的数据
      const currentDate = new Date();
      const xAxisData = [];
      const seriesData = []
      for (let i = -3; i <= 3; i++) {
        const date = new Date(currentDate);
        date.setDate(currentDate.getDate() + i);
        const formattedDate = date.toISOString().substr(0, 10);
        xAxisData.push(formattedDate);
        const count = data.filter((item) => item.date === formattedDate).length;
        seriesData.push(count);
      }

      const option = {
        title: {
          text: '7天内新增商品数量',
          fontSize: 18,
          fontWeight: 'bold',
          left: 'center'
        },
        // 这里是echarts图表的配置选项
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: seriesData,
          type: 'line'
        }]
      };
      myChart.setOption(option);

    })

    // 格式化日期为字符串

    // 在组件卸载时销毁echarts实例
    return () => {
      myChart.dispose();
    };
  }, []);

  useEffect(() => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    const date = [0, 0, 0, 0, 0, 0, 0]
    const dete = ['鞋子', '背包', '手机', '生活用品', '其他', '电脑', '衣服', '首饰品']
    const data = []
    axios.get(`https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/bscs`, {
      headers: {
        " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
        "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
        "Content-Type": ""
      }
    }).then((res) => {
      console.log(res)
      // console.log(date)
      for (let i = 0; i < res.data.results.length; i++) {
        for (let a = 0; a < 8; a++) {
          // console.log("执行了",a+1,res.data.results[i].bcid)
          if (res.data.results[i].bcid == a + 1) {

            date[a]++
          }
        }

      }
      console.log(date)

      for (let b = 0; b < 8; b++) {
        data[b] = { value: date[b], name: dete[b] }
      }
      console.log("data", data)
      option = {
        title: {
          text: '统计商品数量分布情况',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    })

  }, [])
  return (
    <div className='user'>
      <div className='u' >
        <div className='U'>
          <div className='u3text1'>
            <div className='u3t1t1'>
              <span>注册总人数</span>
            </div>
            <div className='u3t1t2'>
              <span>{people}</span>
            </div>

          </div>
          <div className='u3text2'>
            <div className='u3t2t1'>
               <span>商品总数量</span>
            </div>
           <div className='u3t2t2'>
            <span>{sp}</span>
           </div>
            
          </div>
        </div>

      </div>
      <div id="main" style={{ width: '800px', height: '400px' }}></div>
      <div id="chart" style={{ width: '800px', height: '400px' }}></div>
      <div id="shoop" style={{ width: '800px', height: '400px' }}></div>

    </div>

  );
};

export default User3;